<template>
  <view>
    <!-- 功能中心标题（仅已登录时显示） -->
    <view class="function-center-title" v-if="isLoggedIn">
      <text class="title-text">功能中心</text>
      <text class="subtitle-text">选择你想要使用的功能</text>
    </view>
    
    <!-- 功能网格 - 增强版 -->
    <view class="function-grid-enhanced">

      
      <view class="function-card sync" @click="handleNavigate('sync')">
        <view class="card-gradient gradient-blue"></view>
        <view class="card-content">
          <text class="function-icon-large">🔄</text>
          <text class="function-name-bold">数据同步</text>
          <text class="function-desc-new">同步服务器数据</text>
        </view>
      </view>
      
      <view class="function-card logs" @click="handleNavigate('logs')">
        <view class="card-gradient gradient-cyan"></view>
        <view class="card-content">
          <text class="function-icon-large">📄</text>
          <text class="function-name-bold">接口日志</text>
          <text class="function-desc-new">查看请求记录</text>
        </view>
      </view>
      
      <view class="function-card tts" @click="handleNavigate('tts')">
        <view class="card-gradient gradient-orange"></view>
        <view class="card-content">
          <text class="function-icon-large">🎙️</text>
          <text class="function-name-bold">配音生成</text>
          <text class="function-desc-new">文本转MP3</text>
        </view>
      </view>

      <view class="function-card emoji" @click="handleNavigate('emoji')">
        <view class="card-gradient gradient-pink"></view>
        <view class="card-content">
          <text class="function-icon-large">😄</text>
          <text class="function-name-bold">表情包</text>
          <text class="function-desc-new">搜图与预览</text>
        </view>
      </view>
      
      <view class="function-card pet" @click="handleNavigate('pet')">
        <view class="card-gradient gradient-green"></view>
        <view class="card-content">
          <text class="function-icon-large">🐾</text>
          <text class="function-name-bold">桌面宠物</text>
          <text class="function-desc-new">萌宠陪伴</text>
        </view>
      </view>

      <view class="function-card package" @click="handleNavigate('package')">
        <view class="card-gradient gradient-yellow"></view>
        <view class="card-content">
          <text class="function-icon-large">📦</text>
          <text class="function-name-bold">包裹管理</text>
          <text class="function-desc-new">取件码管理</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FunctionGrid',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleNavigate(type) {
      this.$emit('navigate', type)
    }
  }
}
</script>

<style scoped>
/* 功能中心标题 */
.function-center-title {
  margin: 32rpx 0 20rpx 0;
  text-align: center;
}

.title-text {
  font-size: 34rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle-text {
  font-size: 22rpx;
  color: #9ca3af;
  display: block;
}

/* 功能网格 - 增强版 */
.function-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 32rpx;
}

.function-card {
  position: relative;
  background: white;
  border-radius: 22rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.function-card:active {
  transform: translateY(-6rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
}

.card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  opacity: 0.15;
}

.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-cyan {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-yellow {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.card-content {
  position: relative;
  text-align: center;
  z-index: 1;
}

.function-icon-large {
  font-size: 56rpx;
  display: block;
  margin-bottom: 14rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8rpx); }
}

.function-card:nth-child(1) .function-icon-large { animation-delay: 0s; }
.function-card:nth-child(2) .function-icon-large { animation-delay: 0.2s; }
.function-card:nth-child(3) .function-icon-large { animation-delay: 0.4s; }
.function-card:nth-child(4) .function-icon-large { animation-delay: 0.6s; }
.function-card:nth-child(5) .function-icon-large { animation-delay: 0.8s; }
.function-card:nth-child(6) .function-icon-large { animation-delay: 1s; }

.function-name-bold {
  font-size: 26rpx;
  font-weight: bold;
  color: #1f2937;
  display: block;
  margin-bottom: 8rpx;
}

.function-desc-new {
  font-size: 20rpx;
  color: #6b7280;
  display: block;
}
</style>

